<template>
  <z-paging ref="paging" v-model="goodsList" @query="queryList">
    <view class="df container">
      <!-- 左侧滚动视图区域 -->
      <scroll-view class="left" scroll-y="true" :style="{ height: wh + 'px' }">
        <view class="item active" v-for="item in categoryList" :key="item.id">{{
          item.name
        }}</view>
      </scroll-view>
      <!-- 右侧的滚动视图区域 -->
      <scroll-view class="right" scroll-y="true" :style="{ height: wh + 'px' }">
        <goods-list-item
          v-for="item in goodsList"
          :key="item.id"
          :item="item"
        />
      </scroll-view>
    </view>
  </z-paging>
</template>
<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import { goodsListApi } from "@/api/index.js";

onLoad(() => {
  //获取当前系统的信息
  const sysInfo = uni.getSystemInfoSync();
  console.log(sysInfo);
  //为wh窗口可用高度动态赋值
  const wh = sysInfo.windowHeight;
});

const categoryList = ref([
  { name: "小孩子", id: 1 },
  { name: "淘宝", id: 2 },
  { name: "拼多多", id: 3 },
  { name: "京东", id: 4 },
  { name: "小红书", id: 5 },
  { name: "抖音", id: 6 },
  { name: "快手", id: 7 },
  { name: "微信视频号", id: 8 },
]);

// 商品列表
const goodsList = ref([]);
const paging = ref(null);
const queryList = (pageNo, pageSize) => {
  const params = {
    currentPage: pageNo,
    pageSize: pageSize,
  };
  goodsListApi(params)
    .then((res) => {
      paging.value.complete(res.records);
    })
    .catch((res) => {
      paging.value.complete(false);
    });
};
</script>
<style lang="scss" scoped>
.container {
  .left {
    width: 200rpx;
    background-color: #f0f0f0;
    .item {
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
    }
  }
  .right {
  }
}
</style>
